@charset "utf-8";

body{
	margin: 0; /* 清除默认边距，避免背景偏移 */
	min-height: 100vh; /* 确保 body 至少占满屏幕高度，背景不被压缩 */
	background: url(../workimg/家.jpg);
	/* 背景尺寸属性 */
	background-size: cover;
	/* 背景平铺属性 */
	background-repeat: no-repeat;
	background-attachment: fixed;/* 关键：背景固定，不随滚动/元素移动变化 */
	animation: bgChange 30s linear infinite;
}
@keyframes bgChange {
    0% {
        background-image: url(../workimg/家.jpg);
		background-size: cover;
    }
	
    40% {
        background-image: url(../workimg/家.jpg);
		background-size: cover;
    }
    80% { /* 80%时切换为院子背景 */
        background-image: url(../workimg/院子.jpg);
		background-size: 100% 100%;
    }
    100% {/* 100%时可根据需要切换回或继续其他背景 */
        background-image: url(../workimg/end1.png);
		background-size: 100% 100%;
    }
}

.cheese{
	width: 100px;
	height: 100px;
	/* 判断选择器是否选中 */
	bor der: 1px solid red;
	/* 背景图片 复合属性 */
	background: url(../workimg/奶酪1.png);
	/* 出现背景-背景图大于空间 --设置背景尺寸*/
	background-size: 100% 100%;
	/* 相对定位 */
	position: relative;
	top: 338px;
	left: 86px;
	animation: cheeseMove 30s linear infinite;
}
@keyframes cheeseMove{
	0%{
		top: 338px;
		left: 86px;
		opacity: 1; /* 初始状态：完全显示 */
		visibility: visible; /* 确保元素可见 */
	}
	20%{
		top: 338px;
		left: 86px;
		background: url(../workimg/奶酪1.png);
		background-size: 100% 100%;
		opacity: 1; /* 20%时仍显示 */
	}
	20.01%{ /* 20%后立即开始消失 */
		opacity: 0; /* 完全透明（视觉上消失） */
		visibility: hidden; /* 防止透明后仍占位置/可交互 */
	}
	100%{ /* 保持消失状态直到循环 */
		top: 338px;
		left: 86px;
		opacity: 0;
		visibility: hidden;
	}
}
/* 猫 */
.cat{
	width: 140px;
	height: 140px;
	/* 判断选择器是否选中 */
	bor der: 1px solid red;
	/* 背景图片 复合属性 */
	background: url(../workimg/cat-1.png);
	/* 出现背景-背景图大于空间 --设置背景尺寸*/
	background-size: 100% 100%;
	/* 相对定位 */
	position: relative;
	top: 37px;
	left: 620px;
	animation: catMove 30s linear infinite;
}
/* 动画：1.写关键帧2.元素添加动画，找到元素属性 */
@keyframes catMove{
	0%{
		top: 37px;
		left: 620px;
		opacity: 1; /* 初始完全显示 */
		visibility: visible;
	}
	10%{
		top: 37px;
		left: 60px;
		background: url(../workimg/cat-1.png);
		background-size: 100% 100%;
		opacity: 1;
	}
	20%{/* 向下走拿奶酪 */
		top: 133px;
		left: 60px;
		background: url(../workimg/cat-1.png);
		background-size: 100% 100%;
		opacity: 1;
	}
	20.02%{
		background: url(../workimg/拿奶酪跑2.png);
		background-size: 100% 100%;
		opacity: 1;
	}
	30%{/* 走到桌子边 */
		top: 214px;
		left: 320px;
		background: url(../workimg/拿奶酪跑2.png);
		background-size: 100% 100%;
		opacity: 1;
	}
	40%{/* 去椅子上 */
		top: 192px;
		left: 530px;
		background: url(../workimg/拿奶酪跑2.png);
		background-size: 100% 100%;
		opacity: 1;
	}
	50%{/* 去灶台上 */
		top: 146px;
		left: 627px;
		background: url(../workimg/拿奶酪跑2.png);
		background-size: 100% 100%;
		opacity: 1;
	}
	60%{/* 跑出去 */
		top: 450px;
		left: 1650px;
		background: url(../workimg/拿奶酪跑2.png);
		background-size: 100% 100%;
		opacity: 1;
	}
	60.01%{/* 60%节点后立即切换*/
		background: url(../workimg/跑2.gif);
		background-size: 100% 100%;
		opacity: 1;
	}
	70%{/* 切到院子外 */
		top: 310px;
		left: 1547px;
		background: url(../workimg/跑2.gif);
		background-size: 100% 100%;
		opacity: 1;
	}
	80%{/* 跑出去 */
		top: 490px;
		left: 0px;
		background: url(../workimg/跑2.gif);
		background-size: 100% 100%;
		opacity: 1;
	}
	80.01%{
		top: 490px;
		left: 0px;
		background: url(../workimg/跑2.gif);
		background-size: 100% 100%;
		opacity: 0;
		visibility: hidden;
	}
	100%{/* 保持消失状态到循环结束 */
		opacity: 0;
		visibility: hidden;
	}
}
.mouse{
	width: 300px;
	height: 200px;
	/* 判断选择器是否选中 */
	bor der: 1px solid red;
	/* 背景图片 复合属性 */
	background: url(../workimg/老鼠11.png);
	/* 出现背景-背景图大于空间 --设置背景尺寸*/
	background-size: 100% 100%;
	/* 相对定位 */
	position: relative;
	top: 350px;
	left: 100px;
	animation: mouse 30s linear infinite;
	transform-origin: center;/* 关键：设置缩放中心点（默认是元素中心，可选top/left等） */
	transform: scale(1.5);
}
	
@keyframes mouse{
	0%{
		top: 350px;
		left: 100px;
		transform: scale(1.5);
		opacity: 1;
		visibility: visible;
	}
	10%{
		top: 350px;
		left: 100px;
		background: url(../workimg/老鼠11.png);
		background-size: 100% 100%;
		transform: scale(1.5);
		opacity: 1;
	}
	20%{
		top: 350px;
		left: 100px;
		background: url(../workimg/老鼠11.png);
		background-size: 100% 100%;
		transform: scale(1.5);
		opacity: 1;
	}
	20.01%{
		background: url(../workimg/追1.png);
		background-size: 100% 100%;
		transform: scale(1);
		opacity: 1;
	}
	30%{/* 到桌子边 */
		top: 350px;
		left: 100px;
		background: url(../workimg/追1.png);
		background-size: 100% 100%;
		transform: scale(1);
		opacity: 1;
	}
	40%{/*到椅子上  */
		top: -90px;
		left: 280px;
		background: url(../workimg/追1.png);
		background-size: 100% 100%;
		transform: scale(1);
		opacity: 1;
	}
	40.01%{
		background: url(../workimg/追2.png);
		background-size: 100% 100%;
		transform: scale(1.5);
		opacity: 1;
	}
	53%{/* 到灶台上 */
		top: -90px;
		left: 280px;
		background: url(../workimg/追2.png);
		background-size: 100% 100%;
		transform: scale(1.5);
		opacity: 1;
	}
	60%{/* 即将跑出去 */
		top: 135px;
		left: 1730px;
		background: url(../workimg/追2.png);
		background-size: 100% 100%;
		transform: scale(1.5);
		opacity: 1;
	}
	60.01%{
		background: url(../workimg/追4.png);
		background-size: 100% 100%;
		transform: scale(1.5);
		opacity: 1;
	}
	70%{
		top: 70px;
		left: 1630px;
		background: url(../workimg/追4.png);
		background-size: 100% 100%;
		transform: scale(1.5);
		opacity: 1;
	}
	80%{
		top: 300px;
		left: 260px;
		background: url(../workimg/追4.png);
		background-size: 100% 100%;
		transform: scale(1.5);
		opacity: 1;
	}
	80.01%{
		top: 130px;
		left: 120px;
		background: url(../workimg/追3.png);
		background-size: 100% 100%;
		transform: scale(2);
		opacity: 1;
	}
	90%{
		top: 510px;
		left: 1420px;
		background: url(../workimg/追3.png);
		background-size: 100% 100%;
		transform: scale(2);
		opacity: 1;
	}
	90.01%{
		top: 510px;
		left: 1420px;
		background: url(../workimg/追3.png);
		background-size: 100% 100%;
		opacity: 0;
		visibility: hidden;
	}
	100%{
		opacity: 0;
		visibility: hidden;
	}
}